<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>瀑布流</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">

    <link rel="icon" href="../img/web/web.ico"/>
    <link rel="stylesheet" href="../layui/css/layui.css"/>
    <link rel="stylesheet" href="../css/app.css"/>
    <style>
        /* 演示用CSS,实际项目请删除1.3.5 */
        .demo-item-content {
            padding: 20px;
            background: #EFEFEF;
        }
        .demo-content-lar{
            height: 80px;
        }
        .demo-content-sma{
            height: 150px;
        }
        .demo-content-mid{
            height: 20px;
        }
    </style>
<body ontouchstart="">

<div class="layui-fluid">
    <div class="layui-row">

        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header layui-elip">瀑布流</div>
                <div class="layui-card-body">

                    <div class="vip-waterfall-fluid vip-waterfall-col4 ">
                        <div class="vip-waterfall-item">
                            <div class="demo-item-content demo-content-lar"> 1 </div>
                        </div>
                        <div class="vip-waterfall-item">
                            <div class="demo-item-content demo-content-sma"> 2 </div>
                        </div>
                        <div class="vip-waterfall-item">
                            <div class="demo-item-content demo-content-mid"> 3 </div>
                        </div>
                        <div class="vip-waterfall-item">
                            <div class="demo-item-content demo-content-sma"> 4 </div>
                        </div>
                        <div class="vip-waterfall-item">
                            <div class="demo-item-content demo-content-mid"> 5 </div>
                        </div>
                        <div class="vip-waterfall-item">
                            <div class="demo-item-content demo-content-lar"> 6 </div>
                        </div>
                        <div class="vip-waterfall-item">
                            <div class="demo-item-content demo-content-sma"> 7 </div>
                        </div>
                        <div class="vip-waterfall-item">
                            <div class="demo-item-content demo-content-lar"> 8 </div>
                        </div>
                        <div class="vip-waterfall-item">
                            <div class="demo-item-content demo-content-lar"> 9 </div>
                        </div>
                        <div class="vip-waterfall-item">
                            <div class="demo-item-content demo-content-sma"> 10 </div>
                        </div>
                        <div class="vip-waterfall-item">
                            <div class="demo-item-content demo-content-mid"> 11 </div>
                        </div>
                        <div class="vip-waterfall-item">
                            <div class="demo-item-content demo-content-sma"> 12 </div>
                        </div>
                        <div class="vip-waterfall-item">
                            <div class="demo-item-content demo-content-lar"> 13 </div>
                        </div>
                        <div class="vip-waterfall-item">
                            <div class="demo-item-content demo-content-sma"> 14 </div>
                        </div>
                        <div class="vip-waterfall-item">
                            <div class="demo-item-content demo-content-lar"> 15 </div>
                        </div>
                        <div class="vip-waterfall-item">
                            <div class="demo-item-content demo-content-lar"> 16 </div>
                        </div>
                        <div class="vip-waterfall-item">
                            <div class="demo-item-content demo-content-sma"> 17 </div>
                        </div>
                        <div class="vip-waterfall-item">
                            <div class="demo-item-content demo-content-mid"> 18 </div>
                        </div>
                        <div class="vip-waterfall-item">
                            <div class="demo-item-content demo-content-sma"> 19 </div>
                        </div>
                        <!-- more items -->
                    </div>

                </div>
            </div>
        </div>
        <!--<div class="layui-col-md6">
            <div class="layui-card">
                <div class="layui-card-header layui-elip">标题2</div>
                <div class="layui-card-body">
                    <div class="layui-row layui-col-space15">
                        <div class="layui-col-md6">内容2-1</div>
                        <div class="layui-col-md6">内容2-2</div>
                    </div>
                </div>
            </div>
        </div>-->

    </div>
</div>

<script type="text/javascript" src="../layui/layui.js"></script>
<script type="text/javascript">
layui.use('layer',function(){

});
</script>
</body>
</html>